<template>
  <div class="Detail-box">
    <div class="Detail">
      <div class="tab">
        <div class="tab_left">退货商品</div>
        <div class="tab_right">
          <!-- 表单 -->
          <el-table
            :data="list"
            style="width: 100%"
            border
            table-layout="auto"
            cell-class-name="align-c"
          >
            <el-table-column
              prop="productPic"
              label="商品图片"
              width="80"
              align="center"
            >
              <template #default="{ row }">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="row.productPic"
                  :zoom-rate="1.2"
                  :initial-index="4"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="300" align="center">
              <template #default="{ row }">
                <p>{{ row.productName }}</p>
                <p>品牌:{{ row.productBrand }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="productRealPrice"
              label="价格/货号"
              align="center"
            >
              <template #default="{ row }">
                <p>价格: {{ addMoney(row.productRealPrice) }}</p>
                <p>货号:NO. {{ row.productId }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="productAttr"
              label="属性"
              align="center"
            ></el-table-column>
            <el-table-column
              label="数量"
              width="100"
              prop="productCount"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="小计"
              width="150"
              prop="productRealPrice"
              align="center"
            >
              <template #default="{ row }">
                <span>{{ addMoney(row.productRealPrice) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="button-money">
            合计:
            <span class="red-money">{{ addMoney(HeJi) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="descriptions-box">
      <div class="service-box">
        <div class="service">服务单信息</div>
        <div class="table">
          <table class="mailTable" cellspacing="0" cellpadding="0">
            <tr>
              <td class="column">服务单号</td>
              <td>{{ userList?.id }}</td>
            </tr>
            <tr>
              <td class="column">申请状态</td>
              <td>{{ formateStatus(userList?.status) }}</td>
            </tr>
            <tr>
              <td class="column">订单编号</td>
              <td>
                <span>{{ userList?.orderSn }}</span>
                <span
                  @click="router.push('orderDetail?id=' + userList?.id)"
                  class="column-check"
                  >查看</span
                >
              </td>
            </tr>
            <tr>
              <td class="column">申请时间</td>
              <td>{{ formateDate(userList?.createTime) }}</td>
            </tr>
            <tr>
              <td class="column">用户账号</td>
              <td>{{ userList?.memberUsername }}</td>
            </tr>
            <tr>
              <td class="column">联系人</td>
              <td>{{ userList?.returnName }}</td>
            </tr>
            <tr>
              <td class="column">联系电话</td>
              <td>{{ userList?.returnPhone }}</td>
            </tr>
            <tr>
              <td class="column">退货原因</td>
              <td>{{ userList?.reason }}</td>
            </tr>
            <tr>
              <td class="column">问题描述</td>
              <td>{{ userList?.description }}</td>
            </tr>
            <tr>
              <td class="column">凭证图片</td>
              <td>
                <el-image
                  style="width: 80px; height: 80px"
                  :src="userList?.productPic"
                />
              </td>
            </tr>
          </table>
          <table class="mailTable" cellspacing="0" cellpadding="0">
            <tr>
              <td class="column">订单金额</td>
              <td>{{ addMoney(userList?.productRealPrice) }}</td>
            </tr>
            <tr>
              <td class="column">确认退款金额</td>
              <td>
                ￥
                <el-select
                  disabled
                  remote-show-suffix="false"
                  :placeholder="userList?.returnAmount"
                />
              </td>
            </tr>
            <tr>
              <td class="column">选择收货点</td>
              <td>
                <el-select
                  disabled
                  remote-show-suffix="false"
                  :placeholder="userList?.companyAddress?.addressName"
                />
              </td>
            </tr>
            <tr>
              <td class="column">收货人姓名</td>
              <td>{{ userList?.companyAddress?.name }}</td>
            </tr>
            <tr>
              <td class="column">所在区域</td>
              <td>
                {{ userList?.companyAddress?.province }}
                {{ userList?.companyAddress?.city }}
                {{ userList?.companyAddress?.region }}
              </td>
            </tr>
            <tr>
              <td class="column">详细地址</td>
              <td>{{ userList?.companyAddress?.detailAddress }}</td>
            </tr>
            <tr>
              <td class="column">联系电话</td>
              <td>{{ userList?.companyAddress?.phone }}</td>
            </tr>
          </table>
          <table class="mailTable" cellspacing="0" cellpadding="0">
            <tr>
              <td class="column">处理人员</td>
              <td>{{ userList?.receiveMan }}</td>
            </tr>
            <tr>
              <td class="column">处理时间</td>
              <td>{{ formateDate(userList?.handleTime) }}</td>
            </tr>
            <tr>
              <td class="column">处理备注</td>
              <td>{{ userList?.handleNote }}</td>
            </tr>
          </table>
          <table class="mailTable" cellspacing="0" cellpadding="0">
            <tr>
              <td class="column">收货人员</td>
              <td>{{ userList?.receiveMan }}</td>
            </tr>
            <tr>
              <td class="column">处理时间</td>
              <td>{{ formateDate(userList?.receiveTime) }}</td>
            </tr>
            <tr>
              <td class="column">处理备注</td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiReturnApplyAll } from "./api";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, watch } from "vue";
import { addMoney, formateStatus, formateDate } from "@/utils";

const route = useRoute();
const router = useRouter();
// 表单列表
const list = ref<IReturnApplyList[]>([]);
const userList = ref<IReturnApplyList>();

const HeJi = ref<number>(0);

/*
 // 图片
  productPic: "",
  // 手机名
  productName: "",
  // 品牌
  productBrand: "",
  // 价格
  productRealPrice: 0,
  // id
  productId: 0,
  // 属性
  productAttr: "",
  // 数量
  productCount: 0,
*/

if (route.query.id) {
  ApiReturnApplyAll(parseInt(route.query.id as string)).then((res) => {
    if (res.code == 200) {
      list.value = [res.data];
      HeJi.value = res.data.productRealPrice!;
      userList.value = res.data;
    }
  });
}
</script>

<style scoped lang="less">
.Detail-box {
  padding: 50px;
  background-color: #fff;
  .Detail {
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
      0px 0px 80px rgba(0, 0, 0, 0.06);

    .tab {
      .tab_left {
        margin-bottom: 20px;
      }
      .tab_right {
        .button-money {
          text-align: right;
          padding-top: 10px;
          .red-money {
            color: #f56c6c;
          }
        }
      }
    }
  }
  .descriptions-box {
    padding-top: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
      0px 0px 80px rgba(0, 0, 0, 0.06);
    .service-box {
      padding: 20px;

      .table {
        .mailTable {
          width: 100%;
          margin-top: 20px;
          border-top: 1px solid #f2f6fc;
          border-left: 1px solid #f2f6fc;
          td {
            width: 200px;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            padding: 0 10px;
            border: 1px solid #dcdfe6;
          }
          .column {
            background-color: #eff3f6;
            color: #393c3e;
            width: 30%;
          }
          .column-check {
            font-size: 13px;
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
